<template>
	<view class="app-nav-bar">
		<view class="hidden-height" :style="[hiddenHeight()]"></view>
		<view :class="{ 'app-navbar--fixed': fixed, 'app-navbar--shadow': shadow,'app-navbar--border': border, 'app-navbar--content':true}">
			<view :style="[ordinaryStyle()]" class="app-navbar__bar cross-center">
				<view class="dir-left-nowrap app-navbar__box">
					<view class="app-navbar__back cross-center box-grow-0" @click="onClickBack" v-if="pagesLength > 1">
						<view class="icon-back"></view>
					</view>
					<view class="header">
						<view class="lct" @click="reloadCity">
							<image src="/static/images/icon_lct@2x.png" mode="widthFix"></image>
							<text>{{cur_city}}</text>
						</view>
						<view class="so" @click="navGoodsSearch">
							<image src="/static/images/icon_so@2x.png" mode="widthFix"></image>
							<input type="text" placeholder="请输入关键词" placeholder-class="placeholder">
						</view>
						<view class="sao">
							<image src="/static/images/icon_sao@2x.png" mode="widthFix" @click="scanCode"></image>
							<image class="kefu" src="/static/images/icon_chat@2x.png" mode="widthFix" @click="kefu"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: 'app-nav-bar',
		data() {
			return {
				hw_style: {},
				cur_city: '定位中'
			}
		},
		watch: {
			'leftIcon'(newValue, oldValue) {
				console.log('lefticon 监听测试');
				this.doSomething();
			}
		},
		props: {
			fixed: {
				type: [Boolean, String],
				default: true
			},
			shadow: {
				type: [String, Boolean],
				default: false
			},
			border: {
				type: [String, Boolean],
				default: false
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			leftIcon: {
				type: String,
				default: ""
			},
			link: {
				type: [Object, Array]
			},
			title: {
				type: String,
				default: ""
			},
			xStyle: {
				type: [Number, String],
				default: 1
			},
			hasMallSetting: {
				type: [Number, String],
				default: 1
			},
			color: {
				type: String,
				default: "#000000"
			},
			position: {
				type: String,
				default: "center"
			},
			placeholder: {
				type: String,
				default: "搜索"
			},
			placeholderColor: {
				type: String,
				default: "#666666"
			}
		},
		computed: {
			...mapState({
				statusBarHeight: state => state.gConfig.systemInfo.statusBarHeight,
				mBarHeight: state => state.gConfig.mBarHeight,
				appImg: state => state.mallConfig.__wxapp_img.mall,
				mallNavbar: state => state.mallConfig.navbar
			}),
			maxWidth() {
				return () => {
					let xstyle = parseInt(this.xStyle);
					let width = 0;

					switch (xstyle) {
						case 1:
							if (this.position === 'center') {
								width = uni.upx2px(360);
							} else {
								width = uni.upx2px(500);
							}
							break;
						case 2:
							width = uni.upx2px(400);
							break;
						case 4:
							width = uni.upx2px(200);
							break;
						default:
							break;
					}
					if (width && this.pagesLength > 1) {
						width -= uni.upx2px(42);
					}
					return Object.assign({}, {
						'max-width': width + 'px',
					});
				}
			},
			hiddenHeight() {
				return () => {
					let barHeight;
					// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
					barHeight = this.statusBarHeight;
					// #endif
					barHeight = barHeight || 0;
					return {
						height: (barHeight + this.mBarHeight) + 'px',
					}
				}
			},
			ordinaryStyle() {
				return () => {
					let color = '';
					let backgroundColor = '';
					if (this.hasMallSetting == 1) {
						color = this.mallNavbar.top_text_color;
						backgroundColor = this.mallNavbar.top_background_color;
					} else {
						color = this.color;
						backgroundColor = this.backgroundColor;
					}
					let barHeight;
					// #ifdef MP
					barHeight = this.statusBarHeight;
					// #endif
					barHeight = barHeight || 0;
					color = color || '#000000';
					backgroundColor = backgroundColor || '#FFFFFF';
					return Object.assign({}, {
						color,
						backgroundColor,
						height: (barHeight + this.mBarHeight) + 'px',
						paddingTop: barHeight + 'px',
					})
				}
			},
			hasJump() {
				return [2, 4].indexOf(parseInt(this.xStyle)) !== -1
			},
			showLeftIcon() {
				return [2, 3].indexOf(parseInt(this.xStyle)) !== -1 && this.leftIcon
			},
			showTitle() {
				return [1, 2, 4].indexOf(parseInt(this.xStyle)) !== -1 && this.title
			},
			showLink() {
				return [3, 4].indexOf(parseInt(this.xStyle)) !== -1 && this.link
			},
			pagesLength() {
				return getCurrentPages().length;
			},
		},
		mounted() {
			let self = this;
			self.doSomething();
			if (!self.$storage.getStorageSync('storage_city')) {
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.address);
						if(!res.address){
							self.cur_city = '中国';
						}else{
							self.cur_city = res.address.city;
							self.$storage.setStorageSync('storage_city', true);
						}
					}
				});
			}
		},
		methods: {
			// 重新定位
			reloadCity() {
				let self = this;
				self.cur_city = '定位中';
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.address);
						if(!res.address){
							self.cur_city = '中国';
						}else{
							self.cur_city = res.address.city;
							this.$storage.setStorageSync('storage_city', true);
						}
					}
				});
			},
			doSomething() {
				const maxHeight = 54;
				const maxWidth = 100;
				const self = this;
				uni.getImageInfo({
					src: self.leftIcon,
					success: function(res) {
						let {
							height,
							width
						} = res;
						if (height <= maxHeight && width <= maxWidth) {
							// height = height;
							// width = width;
						}
						if (height <= maxHeight && width >= maxWidth) {
							height = height / (width / maxWidth);
							width = maxWidth;
						}
						if (height >= maxHeight && width <= maxWidth) {
							height = maxHeight;
							width = width / (height / maxHeight);
						}

						if (height > maxHeight && width >= maxWidth) {
							if (maxWidth / maxHeight > width / height) {
								width = width / (height / maxHeight);
								height = maxHeight;
							} else {
								height = height / (width / maxWidth);
								width = maxWidth;
							}
						}
						self.hw_style = {
							height: uni.upx2px(height) + 'px',
							width: uni.upx2px(width) + 'px',
						};
						console.log(self.hw_style);
					}
				})
			},
			navGoodsSearch() {
				uni.navigateTo({
					url: '/pages/search/search',
				})
			},
			onClickBack() {
				uni.navigateBack({
					delta: 1
				})
			},
            // 扫码
            scanCode() {
				let that = this;
				// #ifndef MP-ALIPAY || H5
				uni.scanCode({
					success(res) {
						if(res.scanType == "CODE_128" || (res.result && res.result.length == 12)) {
							that.code = res.result
						} else {
							if(res.path) {
								uni.redirectTo({
									url: res.path
								})
							}else {
								uni.showToast({
									title: '暂不支持此二维码，请使用应用内扫一扫功能',
									icon: 'none',
									duration: 1000
								});
							}
						}
					}
				})
				// #endif
				// #ifdef H5
				if (this.$jwx.isWechat()) {
					this.$jwx.scanQRCode({
						success(res) {
							let path = '';
							if(res.path) {
								path = res.path;
							}
							if(res.resultStr) {
								let index = res.resultStr.indexOf('?#')
								if(index > -1) {
									path = res.resultStr.substring(index + 2);
								}else {
									uni.showToast({
										title: res.resultStr,
										icon: 'none',
										duration: 1000
									});
								}
							}
							if(!path) {
								uni.showToast({
									title: '无法处理的二维码',
									icon: 'none',
									duration: 1000
								});
								return false;
							}
							uni.navigateTo({
								url: path
							})
						}
					})
				}else {
					uni.showToast({
						title: '暂不支持浏览器点击扫码，请应用扫一扫功能',
						icon: 'none',
						duration: 1000
					});
				}
				// #endif
            },
            // 客服
            kefu() {
				let	url='http://kefu.itm19.com/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1'
				// #ifdef APP-PLUS
				plus.runtime.openURL(url);
				return false;
				// #endif
				// #ifdef H5
				window.open(url);
				return false;
				// #endif
				window.location.href = url;
				// url = encodeURIComponent(url)
				// uni.navigateTo({
				// 	url:'/pages/kefu/index?url='+url
				// })
            }
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	$bar-height: 0;
	/* #endif */
	/* #ifdef MP */
	$bar-height: 20px;
	/* #endif */
	$app-height: 44px+$bar-height;
	$app-bg-color: #FFFFFF;

	.app-nav-bar {
		.hidden-height {
			height: $app-height;
		}

		.app-navbar--fixed {
			position: fixed;
			z-index: 9998;
			top: 0;
		}

		.app-navbar--shadow {
			box-shadow: 0 1px 6px #ccc;
		}

		.app-navbar--border {
			border-bottom-width: #{1rpx};
			border-bottom-style: solid;
			border-bottom-color: $app-bg-color;
		}

		.app-navbar--content {
			width: 100vw;
			background-color: $app-bg-color;
			overflow: hidden;
		}
	}

	.header {
		position: fixed;
		background: #fff;
		height: 88rpx;
		line-height: 88rpx;
		z-index: 100;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25rpx;
		box-sizing: border-box;

		.lct {
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: auto;
			}

			text {
				font-size: 20rpx;
				color: #333;
				margin-left: 10rpx;
			}
		}

		.so {
			flex: 1;
			margin: 0 20rpx;
			box-sizing: border-box;
			position: relative;

			image {
				width: 38rpx;
				height: auto;
				position: absolute;
				top: 0;
				left: 26rpx;
				bottom: 0;
				margin: auto;
			}

			input {
				background: rgba(219, 219, 219, 0.37);
				border-radius: 100px;
				height: 62rpx;
				padding: 0 32rpx 0 70rpx;
			}

			.placeholder {
				font-size: 20rpx;
				color: #999;
			}
		}

		.sao {
			display: flex;
			align-items: center;

			image {
				width: 33rpx;
				height: auto;
			}

			.kefu {
				width: 38rpx;
				margin-left: 20rpx;
			}
		}

	}

	.app-navbar__bar {
		height: $app-height;
		padding-top: $bar-height;

		.app-navbar__box {
			position: relative;
			width: 100%;

			.app-navbar__back {
				padding-left: #{26rpx};

				.icon-back {
					background-image: url("../../../static/image/icon/h5-back-2.png");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					height: #{27rpx};
					width: #{16rpx};
					display: block;
				}
			}

			.app-navbar__right {
				>view {
					padding-left: #{26rpx};
				}

				.left-icon image {
					max-height: #{54rpx};
					max-width: #{100rpx};
					height: 0;
					width: 0;
					display: block;
				}

				.title {
					font-size: #{32rpx};
					font-weight: bold;

					>view {
						max-width: 50vw;
					}
				}

				.link-search {
					width: #{298rpx};
					height: #{55rpx};
					background-color: #FFFFFF;
					border-radius: #{40rpx};
					position: relative;

					.link-box {
						position: absolute;
						top: 0;
						left: 0;
						font-size: #{22rpx};
						height: #{55rpx};
						padding: 0 #{24rpx};
						width: 100%;
						border: 1upx solid #e2e2e2;
						border-radius: #{40rpx};

						.search-placeholder {
							max-width: #{218rpx};
						}

						.search-icon {
							background-image: url("../../../static/image/icon/icon-search.png");
							background-repeat: no-repeat;
							background-size: 100% 100%;
							height: #{26rpx};
							width: #{26rpx};
						}
					}
				}
			}

			.app-navbar__right-center {
				margin-right: 0;

				.title {
					padding-left: 0;
				}
			}

			.app-navbar__right-center.right__back {
				margin-right: calc(#{26rpx} + #{16rpx});
			}
		}
	}
</style>
